<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: skyblue;
            cursor: pointer;
            position: absolute;
        }
    </style>
</head>
<body>
  <div id="div1"></div>

  <script type="text/javascript">
      var oDiv = document.getElementById('div1');
      var disX = 0;
      var disY = 0;

      document.onmousedown = function (ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;

          document.onmousemove = function (ev) {
              var oEvent = ev || event;

              var l = oEvent.clientX - disX;
              var t = oEvent.clientY - disY

              if(l<0){
                  l=0;
              }
              else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                  l=document.documentElement.clientWidth-oDiv.offsetWidth
              }
              else if(t<0){
                  t=0;
              }
              else if(t>document.documentElement.clientHeight - oDiv.offsetHeight){
                  t=document.documentElement.clientHeight - oDiv.offsetHeight
              }

              oDiv.style.left =l +'px';
              oDiv.style.top =t +'px';
          };

          document.onmouseup = function () {
              document.onmousemove = null;
              document.onmouseup = null;
          }


      }

  </script>

</body>
</html>